表格高级用法：固定表头与多级表头
固定表头
当表格数据较多需要滚动时，固定表头可以始终保持列标题可见：
<el-table :data="tableData" height="400" stripe>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="address" label="地址" />
</el-table>
vue
设置 height 属性后，表格会自动启用固定表头和滚动功能。
多级表头（嵌套表头）
通过嵌套 el-table-column 实现多级表头：
<el-table :data="tableData" border>
<el-table-column prop="name" label="姓名" />
<el-table-column label="联系信息">
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="email" label="邮箱" />
</el-table-column>
<el-table-column label="地址信息">
<el-table-column prop="province" label="省份" />
<el-table-column prop="city" label="城市" />
<el-table-column prop="district" label="区县" />
</el-table-column>
</el-table>
vue
Slot 内嵌实现自定义渲染
在多级表头中结合 Slot 实现自定义单元格渲染：
<el-table-column label="操作">
<template #default="{ row }">
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
vue
嵌套数据展示
对于树形结构的数据，使用 row-key 和 tree-props 属性：
<el-table
:data="tableData"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="name" label="名称" />
<el-table-column prop="type" label="类型" />
</el-table>
vue
数据结构：
const tableData = [
{
id: 1,
name: '前端课程',
type: '分类',
children: [
{ id: 11, name: 'Vue3 实战', type: '课程' },
{ id: 12, name: 'React 进阶', type: '课程' }
]
}
]
typescript
↑